/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/anchor-has-content */
import styles from './index1.module.scss'
import Down from '@/assets/Home/Down.png'
import temp from '@/assets/Home/temp.png'
import user from '@/assets/Home/user.png'
import img1 from '@/assets/Home/Group_626147.png'
import img2 from '@/assets/Home/Rectangle_4453.png'
import mask1 from '@/assets/Home/mask1.png'
import mask2 from '@/assets/Home/mask2.png'
import mask3 from '@/assets/Home/mask3.png'
import warning5 from '@/assets/Home/warning5.png'
import maskInfo from '@/assets/Home/maskInfo.png'
import yellowPoint from '@/assets/Home/yellowPoint.svg'
import { useNavigate } from 'react-router-dom'
import React, { useState } from 'react'
import { RightOutlined } from '@ant-design/icons'

const Floor2 = () => {
  const [isShow, setIsShow] = useState(false)

  const navigate = useNavigate()
  const clickButton = (route) => {
    console.log(route)
    navigate(route)
  }

  return (
    <div className={styles.main}>
      <div>
        <div className={styles.selectBox} id='selectBox'>
          <select className={styles.select}
            style={{
              backgroundImage: `url(${Down})`,
              backgroundPosition: "right 16px center"
            }}
          >
            <option>南三楼</option>
            <option>南四楼</option>
            <option>南五楼</option>
            <option>南六楼</option>
          </select>
        </div>

        <div className={styles.selectButton}>
          <div className={styles.button1}
            onClick={() => clickButton('/floor')}
          >
            <span>
              实时人员监控
            </span>
          </div>
          <div className={styles.button2}
            onClick={() => clickButton('/floor2')}
          >
            <span>
              今日工作情况
            </span>
          </div>
        </div>

        <div className={styles.centerCard}>
          <div className={styles.centerBox}
            style={{
              marginRight: 13
            }}
          >
            <div className={styles.centerBoxContent}>
              <img src={temp} alt="" className={styles.centerBoxContentImg} />
              <div className={styles.centerBoxContentUp}>
                室内
                <span className={styles.centerBoxContentTemp}>
                  13°
                </span>
              </div>
              <div className={styles.centerBoxContentDown}>
                室外
                <span className={styles.centerBoxContentTemp}>
                  12°
                </span>

              </div>
            </div>

          </div>
          <div className={styles.centerBox}
            style={{
              marginRight: 13
            }}
          >
            <div className={styles.centerBoxContent}>
              <img src={user} alt="" className={styles.centerBoxContentImg2} />
              <div className={styles.centerBoxContentUp}>
                老人
                <span className={styles.centerBoxContentTemp}
                  style={{
                    marginLeft: 5
                  }}
                >
                  18人
                </span>
              </div>
              <div className={styles.centerBoxContentDown}>
                员工
                <span className={styles.centerBoxContentTemp}
                  style={{
                    marginLeft: 15
                  }}
                >
                  4人
                </span>

              </div>
            </div>

          </div>
        </div>
      </div>
      <div className={styles.container}>
        <div className={styles.img2}>
          <img src={img2} alt="" />
        </div>
        <div className={styles.img1}>
          <img src={img1} alt="" />
        </div>

        <div className={styles.mask1}>
          <img src={mask1} alt="" />
        </div>
        <div className={styles.mask2}>
          <img src={mask2} alt="" />
        </div>
        <div className={styles.mask3}>
          <img src={mask3} alt=""
            onMouseEnter={() => setIsShow(true)}
            onMouseLeave={() => setIsShow(false)}
          />
        </div>

        {
          isShow &&
          <div className={styles.maskInfo}>
            <img src={maskInfo} alt="" />
          </div>
        }

        <div className={styles.warning5}>
          <img src={warning5} alt=""
          />
          <span style={{
            marginLeft: 12,
          }}>
            今日未按时完成的任务
          </span>
        </div>
      </div>
      <div className={styles.right}>
        <div className={styles.rightTitle}>
          今日任务完成情况
        </div>
        <div className={styles.rightCard}>
          <div className={styles.rightCardBox}
            style={{
              marginRight: 10
            }}
          >
            <div className={styles.rightCardBoxTitle}>
              任务按时完成率
            </div>
            <div className={styles.rightCardBoxText1}>
              95%
            </div>
            <div className={styles.rightCardBoxText2}>
              ↑1.2
              <span className={styles.rightCardBoxText3}>
                较昨日
              </span>
              <a href="#" className={styles.rightCardBoxText4}>
                <RightOutlined />
              </a>
            </div>
          </div>
          <div className={styles.rightCardBox}
            style={{
              marginRight: 10
            }}
          >
            <div className={styles.rightCardBoxTitle}>
              未完成数量
            </div>
            <div className={styles.rightCardBoxText1}>
              6
            </div>
            <div className={styles.rightCardBoxText2}>
              ↓2
              <span className={styles.rightCardBoxText3}>
                较昨日
              </span>
              <a href="#" className={styles.rightCardBoxText4}>
                <RightOutlined />
              </a>
            </div>
          </div>
        </div>
        <div className={styles.rightChart}>
          <div className={styles.rightChartTitle}>
            未完成类型
          </div>
        </div>
        <div className={styles.rightDown}>
          <div className={styles.rightDownTitle}>
            未完成任务清单
          </div>
          <div className={styles.rightDownLine}>
            <img src={yellowPoint} alt="" />
            <span className={styles.rightDownText1}>
              康复治疗
            </span>
            <span className={styles.rightDownText2}>
              杨奶奶
            </span>
            <span className={styles.rightDownText3}>
              15:00-16:00
            </span>
            <span className={styles.rightDownText4}>
              赵医生
            </span>
            <span className={styles.rightDownText4}
              style={{
                marginLeft: 7
              }}

            >
              304
            </span>
          </div>
          <div className={styles.rightDownLine}>
            <img src={yellowPoint} alt="" />
            <span className={styles.rightDownText1}>
              床边助餐
            </span>
            <span className={styles.rightDownText2}>
              李爷爷
            </span>
            <span className={styles.rightDownText3}>
              12:00-13:00
            </span>
            <span className={styles.rightDownText4}>
              赵护工
            </span>
            <span className={styles.rightDownText4}
              style={{
                marginLeft: 7
              }}

            >
              306
            </span>
          </div>
          <div className={styles.rightDownLine}>
            <img src={yellowPoint} alt="" />
            <span className={styles.rightDownText1}>
              晨间护理
            </span>
            <span className={styles.rightDownText2}>
              杨奶奶
            </span>
            <span className={styles.rightDownText3}>
              06:00-07:00
            </span>
            <span className={styles.rightDownText4}>
              李护工
            </span>
            <span className={styles.rightDownText4}
              style={{
                marginLeft: 7
              }}

            >
              304
            </span>
          </div>
          <div className={styles.rightDownLine}>
            <img src={yellowPoint} alt="" />
            <span className={styles.rightDownText1}>
              夜间翻身
            </span>
            <span className={styles.rightDownText2}>
              赵爷爷
            </span>
            <span className={styles.rightDownText3}>
              02:00-03:00
            </span>
            <span className={styles.rightDownText4}>
              罗护工
            </span>
            <span className={styles.rightDownText4}
              style={{
                marginLeft: 7
              }}

            >
              306
            </span>
          </div>
          <div className={styles.rightDownLine}>
            <img src={yellowPoint} alt="" />
            <span className={styles.rightDownText1}>
              夜间翻身
            </span>
            <span className={styles.rightDownText2}>
              潘奶奶
            </span>
            <span className={styles.rightDownText3}>
              00:00-01:00
            </span>
            <span className={styles.rightDownText4}>
              罗护工
            </span>
            <span className={styles.rightDownText4}
              style={{
                marginLeft: 7
              }}

            >
              307
            </span>
          </div>
          <div className={styles.rightDownLine}>
            <img src={yellowPoint} alt="" />
            <span className={styles.rightDownText1}>
              夜间翻身
            </span>
            <span className={styles.rightDownText2}>
              范爷爷
            </span>
            <span className={styles.rightDownText3}>
              00:00-01:00
            </span>
            <span className={styles.rightDownText4}>
              罗护工
            </span>
            <span className={styles.rightDownText4}
              style={{
                marginLeft: 7
              }}

            >
              306
            </span>
          </div>


 
        </div>
      </div>
    </div>
  )
}

export default Floor2